<template>
    <div class="zj">
        <el-row :gutter="0"> <!-- 将间隔设置为0 -->
            <el-col :span="24"> <!-- 设置为24来占满整行 -->
                <el-form ref="专家入库审核" :model="formData" :rules="rules" size="medium" label-width="100px">
                    <el-form-item label="专家名称" prop="mobile" class="form-item"
                        :style="{ display: 'inline-block', margin: '0' }">
                        <el-input v-model="formData.mobile" placeholder="请输入专家名称" :maxlength="11" clearable
                            :style="{ width: '380px' }"></el-input>
                    </el-form-item>
                    <el-form-item label="审核状态" prop="field101" class="form-item"
                        :style="{ display: 'inline-block', margin: '0' }">
                        <el-select v-model="formData.field101" placeholder="请选择审核状态" clearable
                            :style="{ width: '380px' }">
                            <el-option v-for="(item, index) in field101Options" :key="index" :label="item.label"
                                :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-button type="primary" @click="fetchData">查询</el-button>
                    <el-button>重置</el-button>
                </el-form>
            </el-col>
        </el-row>
        <el-divider content-position="left" class="custom-divider"></el-divider>
        <el-table :data="tableData" stripe style="width: 95%" class="zjb">
            <el-table-column label="序号" width="100" align="center">
                <template slot-scope="scope">
                    {{ scope.$index + 1 }} <!-- 自增序号 -->
                </template>
            </el-table-column>
            <el-table-column label="专家姓名" width="120" align="center">
                <template slot-scope="scope">
                    <router-link :to="{ path: '/expert/query', query: { id: scope.row.jid } }" class="expert-name-link"
                        style="color: #7acaef;">
                        {{ scope.row.j_name }}
                    </router-link>
                </template>
            </el-table-column>
            <el-table-column prop="j_phone" label="联系方式" width="160" align="center">
            </el-table-column>
            <el-table-column prop="j_unit" label="工作单位" width="140" align="center">
            </el-table-column>
            <el-table-column prop="specialized" label="主评专业" width="140" align="center">
            </el-table-column>
            <el-table-column prop="j_address" label="所在区域" width="140" align="center">
            </el-table-column>
            <el-table-column prop="j_sh_state" label="审核状态" width="160" align="center">
                <template slot-scope="scope">
                    <el-tag type="warning" v-if="scope.row.j_sh_state === 0">待审核</el-tag>
                    <el-tag v-else-if="scope.row.j_sh_state === 1">已通过</el-tag>
                    <el-tag type="info" v-else-if="scope.row.j_sh_state === 2">未通过</el-tag>
                    <el-tag type="warning" v-if="scope.row.j_sh_state === 3">变更待审核</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="cz" label="操作" align="center">
                <template slot-scope="scope">
                    <div>
                        <el-button v-if="scope.row.j_sh_state === 0 || scope.row.j_sh_state === 3" type="primary"
                            @click="approve(scope.row)">审核</el-button>
                        <el-button v-else-if="scope.row.j_sh_state === 1" type="info"
                            @click="change(scope.row)">变更</el-button>
                        <span v-else-if="scope.row.j_sh_state === 2">-</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <div class="pageArea">
            <div class="pageButton" style="margin-left: auto;">
                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="fetchData" />
            </div>
        </div>
    </div>
</template>
<script scoped>
import { experlist } from '@/api/expert/expertdata.js'
import { updateExpert } from '@/api/expert/expertdata.js'
export default {
    components: {},
    props: [],
    data() {
        return {
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                // 搜索条件
                j_name: null,
                j_sh_state: null,
            },
            currentPage4: 1, // 修改为从1开始
            pageSize: 5,    // 默认每页条数
            total: 0,         // 总条数
            tableData: [],
            formData: {
                mobile: '',
                field101: '', // 初始化为 null
            },
            rules: {
                mobile: [{
                    pattern: /^1(3|4|5|7|8|9)\d{9}$/,
                    message: '手机号格式错误',
                    trigger: 'blur'
                }],
                field101: [],
            },
            field101Options: [
                {
                    "label": "待审核",
                    "value": 0
                }, {
                    "label": "已通过",
                    "value": 1
                }, {
                    "label": "未通过",
                    "value": 2
                }],
        }
    },
    computed: {},
    watch: {},
    created() {
        this.fetchData();
    },
    mounted() {
        // this.fetchData(); // 组件挂载时获取数据
    },
    methods: {
        change(row) {
            const exper = {
                jid: row.jid,
                j_opinion: null,
                j_sh_state: 3
            };
            console.log(this.expertId);

            console.log(this.textarea);
            updateExpert(exper).then(response => {
                // 假设 response.data 包含成功的状态信息
                if (response == 1) {
                    // 处理成功的响应
                    this.$message.success('变更成功!');  // 显示成功消息
                    this.fetchData();
                } else {
                    // 处理业务逻辑上的失败，比如后端返回的是失败状态
                    this.$message.error('变更成功: ' + response.data.message); // 显示错误消息
                }
            }).catch(error => {
                console.error("获取数据失败:", error);
            });
        },
        approve(row) {
            // 用户点击审核按钮，跳转到审核页面，并传递当前专家的信息
            this.$router.push({ path: '/expert/query', query: { id: row.jid, sh: 0 } });
        },
        fetchData() {
            this.queryParams.j_name = this.formData.mobile
            this.queryParams.j_sh_state = this.formData.field101
            experlist(this.queryParams).then(response => { 
                 this.tableData = response.rows.filter(data => data.j_sh_state == 0 || data.j_sh_state == 3|| data.j_sh_state == 1|| data.j_sh_state == 2) // 设定获取的数据到表格数据中.
                this.total = response.total; // 假设 total 是总条数
                console.log(response.rows);
                console.log(response.total);
            }).catch(error => {
                console.error("获取数据失败:", error);
            });
        },
        handleSizeChange(val) {
            this.pageSize = val; // 更新每页条数
            this.fetchData();    // 重新请求数据
        },
        handleCurrentChange(val) {
            this.currentPage4 = val; // 更新当前页
            this.fetchData();         // 重新请求数据
        },
        submitForm() {
            this.$refs['专家入库审核'].validate(valid => {
                if (!valid) return
                // TODO 提交表单
            })
        },
        resetForm() {
            this.$refs['专家入库审核'].resetFields()
        }
    }
}
</script>
<style scoped>
.zj {
    margin-top: 10px;
}

.zjb {
    margin-left: 15px;
    margin-top: 25px;
}

.custom-divider {
    width: 95%;
    /* 设置分隔线的长度 */
    margin-left: 15px;
}

.fy {
    position: absolute;
    left: 620px;
    top: 600px;
}

.el-button {
    margin-left: 20px;
}

.expert-name-link {
    color: #7acaef;
    /* 默认颜色 */
    text-decoration: none;
    /* 默认不下划线 */
}

.expert-name-link:hover {
    text-decoration: underline;
    /* 悬浮时加下划线 */
}
</style>